<template>
  <div class="vx-pay-list">
    <ui-input placeholder="卡号/名称/银行" v-model="searchValue">
      <i slot="suffix" class="ui-input__icon ui-icon-search"></i>
    </ui-input>
    <div class="filters" flex>
      <div class="filter-used">
        <ui-popover placement="bottom" width="100" trigger="hover">
          <div class="filter-used-items">
            <div
              @click="query.used = filterUsedItem"
              v-for="filterUsedItem in ['全部', '最近', '科蓝银行', '数据中心']"
              :key="filterUsedItem"
              class="filter-used-item"
            >
              {{ filterUsedItem }}
            </div>
          </div>
          <div slot="reference">{{ query.used }}<i class="ui-icon-caret-bottom"></i></div>
        </ui-popover>
      </div>
    </div>
    <vx-acronym-index :list="abcItemList" class="payer-bankList-select" v-loading="isLoading">
      <div class="top" ref="topContainer">
        <div
          v-for="(res, index) in payerAcsList"
          :key="index"
          :class="['sections-class', JSON.stringify(activeValue) == JSON.stringify(res) ? 'border-class-o active' : 'border-class-o ']"
          @click="queryPayerAcList(res)"
        >
          <span class="btn-select basic" v-if="index == 0"> 基本户 </span>
          <ui-row>
            <ui-col :span="18" class="col-class">
              <span class="name-class"> {{ res.name }}<br /> </span>
              <span class="acNo-class basic">{{ res.acNo | formatStringFilter }}</span>
              <span class="acNo-class n-show">
                {{ res.acNo | wordcutFilter(4, 4, 8) | formatStringFilter }}
              </span>
            </ui-col>
          </ui-row>
          <ui-row class="first-title basic">
            <span class="balance-money">可用余额(元): </span>
            <br />
            <span class="acNo-class"> {{ res.money | numberFilter(2) }}</span>
          </ui-row>
          <img
            src="@/assets/image/transferRemit/selected.png"
            class="sections-class-selected"
            v-if="JSON.stringify(activeValue) == JSON.stringify(res)"
          />
        </div>
        <div v-if="!payerAcsList.length && !isLoading" class="noData">暂无数据</div>
      </div>
    </vx-acronym-index>
  </div>
</template>

<script>
import transferRemitApi from '@/api/transferRemit';

export default {
  name: 'vx-paylist',
  data() {
    return {
      searchValue: '', // 搜索值
      activeValue: '', // 判断选中值
      payerAcsList: [],
      searchList: [],
      isLoading: false,
      query: {
        used: '全部',
        group: '',
      },
    };
  },
  watch: {
    searchValue(val) {
      if (val == '') {
        this.getBookList();
      } else {
        this.payerAcsList = this.searchList.filter((item) => {
          return item.acNo.indexOf(val) != -1 || item.AccountName.indexOf(val) != -1 || item.DeptSeqName.indexOf(val) != -1;
        });
      }
    },
    query: {
      handler: 'getBookList',
      deep: true,
    },
  },
  created() {
    this.getBookList();
  },
  computed: {
    abcItemList() {
      return this.payerAcsList.map((item) => {
        return {
          name: item.name,
          height: this.activeValue == item ? 123 : 90,
        };
      });
    },
  },
  methods: {
    // 获取名册列表
    async getBookList() {
      try {
        this.isLoading = true;
        // 如果需要自定义列表 在此处根据标识判断发送需要的接口
        let result = await transferRemitApi.getPayerAcList(this.searchInfo);
        this.payerAcsList = result.data.list;
        this.searchList = result.data.list;
      } catch (err) {
        this.$message.error(err.message);
      } finally {
        this.isLoading = false;
      }
    },
    // 获取图片地址
    getImgUrl(icon) {
      return require('@/assets/image/transferRemit/' + icon);
    },
    // 选择付款方信息
    queryPayerAcList(val) {
      this.activeValue = val;
      this.$emit('payerInfo', val);
    },
  },
};
</script>

<style lang="scss">
.vx-pay-list {
  .ui-input__icon {
    color: $color-text-sub;
    font-size: 16px;
  }
  .filters {
    display: flex;
    justify-content: center;
    margin: 15px 0;
    color: $color-info;
    font-size: 14px;
    .filter-used {
      cursor: pointer;
    }
    .filter-group {
      margin-left: 100px;
    }
  }
  .payer-bankList-select {
    .scroll_content::-webkit-scrollbar {
      width: 0px;
      height: 0px;
    }
    .top {
      line-height: 20px;
      font-size: $s14;
    }

    /*右侧*/

    .border-class-o {
      border: 1px solid $color-border-11;
      border-radius: 4px;
      padding: 10px 15px;
      background: $color-bg-default;
      margin-bottom: 10px;
      box-sizing: border-box;
      cursor: pointer;
      position: relative;
      .first-title {
        font-size: $s12;
        color: $color-text-primary;
        font-weight: 400px;
        margin-top: 10px;
      }
      .sections-class-selected {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 36px;
        height: 36px;
      }
      .img-class {
        margin-top: 15px;
        margin-left: 10px;
        width: 40px;
        height: 40px;
      }
      .right-selected {
        width: 40px;
        height: 40px;
        position: absolute;
        z-index: 3;
        bottom: 0;
        right: 0;
        background: url(~@/assets/image/transferRemit/selectRightbottom.png);
        background-size: contain;
      }
      .col-class {
        .name-class {
          font-size: $s14;
          color: $color-text-main;
          font-weight: 600px;
        }

        .acNo-class {
          font-size: $s12;
          color: $color-text-normal;
          font-weight: 400px;
        }
      }

      .col-right-class {
        margin-top: 10px;
        margin-left: 20px;
        line-height: 25px;

        .name-class {
          font-size: $s12;
        }

        .acNo-class {
          font-size: $s12;
        }
      }

      .basic {
        display: none;
      }

      .n-show {
        display: block;
      }
    }
    .active {
      // height: 120px;

      .basic {
        display: block;
      }

      .n-show {
        display: none;
      }

      border: 1px solid rgb(204, 204, 204);
      border-radius: 4px;
      background: $color-bg-card-gradient;
      height: auto;
      margin-bottom: 10px;
      color: $color-text-primary;

      .img-class {
        margin-top: 5px;
        margin-left: 10px;
      }

      .btn-select {
        width: 39px;
        height: 36px;
        background: url('~@/assets/image/transferRemit/basic.png') no-repeat;
        margin-top: -10px;
        padding: 0 5px;
        float: right;
        border-bottom-left-radius: 4px;
        border-top-right-radius: 4px;
        cursor: pointer;
        background-size: contain;
        line-height: 30px;
        color: #a2bbf9;
        font-size: $s12;
      }

      .col-class {
        margin-top: 0;

        .name-class {
          color: $color-text-primary;
          font-weight: 400;
        }

        .acNo-class {
          font-size: $s16;
          color: $color-text-primary;
          font-weight: 600;
        }
      }
    }
  }
}
</style>
